<template>
  <div class="app-container">
    <el-card id="dlls_card" class="box-card" style="min-height: 800px;">
   <div style="display: flex;justify-content: flex-start;">
     <div class="left">
       <div class="tabs_list">
         <div class="tabs">
           <div class="tabs_lie" :class="tabindex == 1?'select_ed':''" @click="tabindex  =1 ">视频合成</div>
           <div class="tabs_lie" :class="tabindex == 2?'select_ed':''"  @click="tabindex =2">视频合成任务</div>
           <div class="tabs_lie" :class="tabindex == 3?'select_ed':''"  @click="tabindex =3">视频合成结果</div>
         </div>
       </div>
     </div>
     <div class="right">
       <hecheng v-if="tabindex == 1"></hecheng>
       <renwu v-if="tabindex == 2" :tabindex.sync="tabindex" :hecheng_id.sync="hecheng_id"></renwu>
       <jieguo  v-if="tabindex == 3" :hecheng_id.sync="hecheng_id"></jieguo>
       <deletes v-if="tabindex == 6"></deletes>
       <deletehecheng  v-if="tabindex == 5"></deletehecheng>
     </div>
   </div>
    </el-card>
  </div>
</template>
<script>
  import hecheng from "./shiping_hecheng.vue";
  import renwu from "./renwu.vue";
  import deletes from "./delete_yuanship.vue";
  import jieguo from "./end_shiping.vue";
  import deletehecheng from "./delete_hecheng_ship.vue";
  export default {
    //存放 数据
    data: function() {
      return {
        hecheng_id:0,
        user_id:0,
        tabindex:1,
      }
    },


    /*  生命周期函数  */
    //创建期间
    beforeCreate() {},
    created() {},
    beforeMount() {},
    mounted() {},
    components: {
      hecheng,
      renwu,
      deletes,
      jieguo,
      deletehecheng,
    },
    //运行期间
    beforeUpdate() {},
    updated() {},
    //销毁时期
    beforeDestroy() {},
    destroyed() {},
    //存放 方法
    methods: {
      sds(val) {
        console.log(val)
      },
    },

    //存放 过滤器
    filters: {},
    //自定义 私有指令
    directives: {},
    // 注意： 组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
    // props 中的数据，都是只读的，无法重新赋值
    // props: [], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
  }
</script>

<style scoped>
  .left {
    width: 210px;
    border-right: 1px solid #ebebeb;
    min-height: 600px;
    list-style: none;
    margin: 0;
    /*position: relative;*/
    z-index: 9;
    /* top: 109px; */
    padding-left: 0;
    background-color: #fff;
  }

  .henggang {
    width: 3px;
    height: 12px;
    background: #F2F6FC;
    margin-right: 5px;
    margin-top: 15px;
  }

  .tabs {
    font-size: 14px;

  }

  .tabs_tab {
    font-size: 14px;
    display: flex;

    line-height: 40px;
  }

  .tabs_lie {
    margin-top: 10px;
    line-height: 40px;
    cursor: pointer;
    padding-left: 10px;
  }

  .tabs_lie:hover {
    background-color: #F2F6FC;

  }
  .right{
    width: calc(100% - 210px);
    /*margin-left: 211px;*/
  }
  .select_ed{
    background-color: #F2F6FC;
  }
</style>
